<template>
  <van-row class="set_wrap">
    <van-col span="24">
      <van-form class="user_info">
        <van-field name="file" label="上传头像">
          <template #input>
            <van-uploader
              v-model="uploader"
              :max-count="1"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        <van-field
          :rules="[{ required: true, message: '请填写用户名' }]"
          v-model="form.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
        />
        <van-field
          v-model="form.email"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
        />
        <van-field
          v-model="form.age"
          type="number"
          name="年龄"
          label="年龄"
          placeholder="年龄"
        />
        <van-field
          v-model="form.description"
          rows="2"
          autosize
          label="自我介绍"
          type="textarea"
          maxlength="50"
          placeholder="请输入自我介绍"
          show-word-limit
        />
      </van-form>
    </van-col>
    <van-col span="24" class="logout_wrap">
      <van-button type="primary" block @click="saveInfo">保 存</van-button>
      <van-button
        plain
        type="danger"
        block
        class="logout_button"
        @click="logout"
      >退出登录</van-button
      >
    </van-col>
  </van-row>
</template>

<script>
import api from '@/api/user'
import { removeToken } from '@/utils/auth'
export default {
  data() {
    return {
      form: {},
      uploader: [],
      uploadFile: null
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    afterRead(file) {
      this.uploadFile = file.file
    },
    async uploadIcon() {
      const formData = new FormData()
      formData.append('folder', 'userIcon')
      formData.append('file', this.uploadFile)
      return api.uploadFile(formData).then((res) => {
        return res.result
      })
    },
    async saveInfo() {
      let info = this.form
      if (this.uploadFile) {
        const fileName = await this.uploadIcon()
        info = Object.assign(info, { avatar: fileName.file_name })
      }
      api.updateUser(info).then((res) => {
        if (res.code === 200) {
          this.$toast.success({
            message: '修改成功',
            duration: 1000,
            onClose: () => {
              this.$router.go(-1)
            }
          })
        }
      })
    },
    logout() {
      api.logout().then((res) => {
        if (res.code === 200) {
          removeToken()
          this.$router.replace({ name: 'UserInfo' })
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    getUserInfo() {
      api.loginInfo().then((res) => {
        if (res.code === 200) {
          this.form = res.result
          if (res.result.avatar) {
            this.uploader.push({ url: this.handle_pic(res.result.avatar) })
          }
        } else {
          this.$router.replace({ name: 'UserInfo' })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.set_wrap {
  height: 100vh;
  background-color: rgba(153, 153, 153, 0.15);
  .user_info {
    margin-top: 10px;
  }
  .logout_wrap {
    padding: 10px 15px 0;
    .logout_button {
      margin-top: 10px;
    }
  }
}
</style>
